<template>
  <div class="wrapper" ref="scroll">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
  export default {
    props: {
      probeType: {
        type: Number,
        default: 0
      },
      pullUpLoad: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        scroll: null
      }
    },
    mounted() {
      this.scroll = new BScroll(this.$refs.scroll, {
        click: true, // 不让better-scroll阻止浏览器默认点击事件
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad
      })
    },
    methods: {
      // 多封装一层，以避免对第三方组件的直接依赖
      scrollTo(x, y, time=500) {
        this.scroll.scrollTo(x, y, time)
      },
      on(type, params) {
        this.scroll.on(type, params)
      },
      finishPullUp() {
        this.scroll.finishPullUp()
      }
    }
  }
</script>

<style scoped>
.wrapper {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  height: calc(100% - 93px);  
  overflow: hidden;
}
</style>